<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Xyulu-文章专栏</title>
<meta name="keywords" content="文章专栏">
<meta name="description" content="文章专栏">
<link rel="stylesheet" href="/blog/dist/semantic/semantic.min.css">
<link rel="stylesheet" href="/blog/layui/css/layui.css" media="all"/>
<link rel="stylesheet" href="/blog/css/global.css"/>
<link rel="stylesheet" href="/blog/css/animate.css"/>
<link rel="stylesheet" href="/blog/css/my.css"/>
</head>
<body>

<div class="layui-header header" th:replace="blog/fragment::nav(2)"></div>

<div class="layui-container container">
    <div class="layui-row layui-col-space20">
        <div class="layui-col-md8" id="blog">
            <div class="animated rotateInDownLeft articleNav">
                <span class="layui-breadcrumb">
                  <a href="javascript:;" th:href="@{/index/1}">首页</a>
                  <a><cite>文章</cite></a>
                </span>
                <hr class="layui-bg-red" style="border-bottom: #db6d4c 4px solid;">

                <div class="ui icon message" th:if="${pageBean.recordCount == 0}">
                    <i class="notched circle loading icon"></i>
                    <div class="content">
                        <p>暂时没有相关文章哦，看看其他的吧</p>
                    </div>
                </div>

                <div class="article-list ui segment" th:each="article:${articles}">
                    <span class="ui teal right ribbon label" th:if="${article.type == 0}">原创</span>
                    <span class="ui right ribbon label" th:if="${article.type == 1}">转载</span>
                    <div id="content">
                        <figure>
                            <a th:href="@{/article/{id}(id=${article.id})}" target="_blank">
                                <img src="/blog/images/01.jpg" th:if="${article.firstImg} != null" th:src="@{${article.firstImg}}">
                                <img src="/blog/images/01.jpg" th:unless="${article.firstImg} != null">
                            </a>
                        </figure>
                        <ul>
                            <h3><a href="javascript:;" target="_blank" th:href="@{/article/{id}(id=${article.id})}" th:text="${article.title}">住在手机里的朋友</a></h3>
                            <p th:text="${article.articleDesc}"></p>
                            <p class="autor">
                            <span class="lm f_l">
                                <a href="javascript:;" th:href="@{'/articleList/1?category='+${article.category}}" th:text="${article.categoryName}">个人博客</a>
                            </span>
                            <span class="dtime f_l" th:text="${#dates.format(article.createTime,'yyyy-MM-dd')}">2014-02-19</span>
                            <span class="viewnum">浏览（<a href="javascript:;" target="_blank" th:text="${article.totalView}" th:href="@{/article/{id}(id=${article.id})}">459</a>）</span>
                            <span class="pingl">评论（<a href="javascript:;" th:text="${article.commentNum}">30</a>）</span></p>
                        </ul>
                    </div>
                </div >
            </div>
            <!--分页-->
            <div id="page" th:replace="blog/fragment::page"></div>
        </div>
        <div class="layui-col-md4" style="margin-top: 30px">
            <div class="article-fenlei ui segment animated bounceInRight">
                <h3>文章分类</h3>
                <div class="ui fluid vertical menu" th:each="category:${categories}">
                    <a href="javascript:;" th:href="@{'/articleList/1?category='+${category.id}}" class="item">
                        <span th:text="${category.categoryName}">学习日志</span>
                    </a>
                </div>
            </div>

            <div class="tuwen ui segment animated bounceInUp">
                <h3>图文推荐</h3>
                <ul>
                    <li th:each="top:${topViews}">
                        <a href="javascript:;" target="_blank" th:href="@{/article/{id}(id=${top.id})}">
                            <img src="/blog/images/02.jpg">
                            <b th:text="${top.title}">教你怎样用欠费手机拨打电话</b>
                        </a>
                        <p><span class="tulanmu">
                            <a href="javascript:;" th:href="@{'/articleList/1?category='+${top.category}}" th:text="${top.categoryName}">手机配件</a></span>
                            <span class="tutime" th:text="${#dates.format(top.createTime,'yyyy-MM-dd')}">2015-02-15</span></p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

<div class="footer" th:replace="blog/fragment::footer"></div>
<!--音乐盒-->
<div id="aplayer"></div>

<script src="/blog/dist/jquery/jquery-3.4.1.min.js"></script>
<script src="/blog/dist/semantic/semantic.min.js"></script>
<script src="/blog/js/global.js"></script>
<script src="/blog/layui/layui.js" type="text/javascript"></script>
<script src="/blog/js/index/index.js" type="text/javascript"></script>
<script src="/blog/js/index/freezeheader.js" type="text/javascript"></script>
<script src="/blog/layui/lay/modules/layer.js" type="text/javascript"></script>
<script src="/blog/js/index/sliders.js" type="text/javascript"></script>
<script src="/blog/js/index/html5.js" type="text/javascript"></script>
<!--<script src="/blog/js/index/article.js" type="text/javascript"></script>-->
<!-- 使用 aotuload.js 引入看板娘 -->
<!--<script src="/blog/kanban/live2d/assets/autoload.js?v=1.4.2"></script>-->
<!--音乐播放器-->
<link href="/blog/APlayer/APlayer.min.css" rel="stylesheet">
<script src="/blog/APlayer/hls.min.js"></script>
<script src="/blog/APlayer/APlayer.min.js"></script>
<script type="text/javascript">

    const ap = new APlayer({
        container: document.getElementById('aplayer'),
        audio: [
            {
                name: '霜雪千年',
                artist: '双笙/封茗囧菌',
                url: 'http://music.163.com/song/media/outer/url?id=409650851.mp3',
            },
            {
                name: '好运来',
                artist: '艾北',
                url: 'http://music.163.com/song/media/outer/url?id=1490642852.mp3',
            }
        ],
        fixed : true
    });
</script>
</body>
</html>
